<template>
	<div class="frame-page h-panel">
		<div class="h-panel-bar">
			<span class="h-panel-title">订单管理</span>
			<div class="h-panel-right">
				<Button color="primary" @click="doEdit(0)"><span class="icon tianjia1"></span> 创建订单</Button>
			</div>
		</div>
		<div class="h-panel-bar">
			<div class="search-filter-wrap">
				<span class="search-picker-title">搜索</span>
				<Search :width="400" v-model="filter.keyword" @search="doSearch()" showSearchButton></Search>
			</div>
			<div class="search-picker">
				<SearchFilter v-model="filter" :datas="$global.config.orderStatus" prop="status" @input="getData()" title="状态"></SearchFilter>
			</div>
		</div>
		<div class="h-panel-body">
			<Table :loading="loading" :datas="datas">
				<TableItem :width="150" prop="number" align="center" title="订单号"></TableItem>
				<TableItem :width="485" align="center" title="产品快照">
					<template slot-scope="{data}" v-if="data.order_product.length > 0">
						<Table :datas="data.order_product" :border="true" class="productTable">
							<TableItem :width="80" prop="product_id" align="center" title="产品编号"></TableItem>
							<TableItem :width="180" align="center" title="产品">
								<template slot-scope="{data}">
									{{data.name}}<br>
									<span v-if="data.spec_data.length > 1 && data.spec_data[data.spec_index]" style="padding: 1px 2px;font-size: 10px;" v-for="(item, index) in data.spec_data[data.spec_index].attr" :class="'h-tag '+ $global.tagColor[index%4]">{{item}}</span>
								</template>
							</TableItem>
							<TableItem :width="100" align="center" title="主图">
								<template slot-scope="{data}">
									<img :src="data.pic" class="productPic" @click="$ImagePreview(data.pic)" @error="$imageError">
								</template>
							</TableItem>
							<TableItem :width="120" align="center" title="小计">
								<template slot-scope="{data}">
									<div>￥{{data.price}}</div>
									<div style="color: #999;">x {{data.num}}</div>
								</template>
							</TableItem>
						</Table>
					</template>
				</TableItem>
				<TableItem :width="120" prop="money" unit="元" align="center" title="总价" sort="auto"></TableItem>
				<TableItem :width="100" align="center" title="状态">
					<template slot-scope="{data}">
						{{$global.getArrayName($global.config.orderStatus,data.status) || '无'}}
					</template>
				</TableItem>
				<TableItem :width="150" align="center" title="用户">
					<template slot-scope="{data}">
						{{data.user.nickname}}
						<br>
						<img :src="data.user.avatar || '/static/avatar.png'" class="tableavatar" @click="$ImagePreview(data.user.avatar)" @error="$imageError">
						<br>
						{{data.user.phone}}
					</template>
				</TableItem>
				<TableItem :width="150" align="center" title="创建时间">
					<template slot-scope="{data}">
						{{$global.getDateTime(data.create_time)}}
					</template>
				</TableItem>
				<TableItem :width="120" align="center" title="操作" fixed="right">
					<template slot-scope="{data}">
						<div style="line-height: 30px;">
							<DropdownMenu @click="doHandle" :datas="$global.config.orderStatus">
								<button class="h-btn h-btn-s h-btn-green" title="快捷受理" @click="id = data.id"><i class="icon kaishi"></i></button>
							</DropdownMenu>
						</div>
						<div style="line-height: 30px;">
							<button class="h-btn h-btn-s h-btn-blue" title="编辑" @click="doEdit(data.id)"><i class="icon bianji"></i></button>
							<button class="h-btn h-btn-s h-btn-red" title="删除" @click="doDelete(data.id)"><i class="icon shanchu"></i></button>
						</div>
					</template>
				</TableItem>
			</Table>
			<p></p>
			<Pagination v-if="pagination.total>0"  align="right" v-model="pagination" @change="getData(false)" />
		</div>
		<Modal v-model="openEdit" :closeOnMask="false">
			<Edit @close="openEdit=false" :id="id"></Edit>
		</Modal>
	</div>
</template>

<script>
import Edit from './edit'
export default {
	components : {
		Edit
	},
	data() {
		return {
			id : 0,
			openEdit : false,
			pagination: {
				page: 1,
				size: 20,
				total: 0
			},
			datas: [],
			loading: false,
			filter: {
				keyword : '',
				status: 0,
			}
		};
	},
	mounted() {
		this.getData()
	},
	methods: {
		doSearch (){
			this.filter = {keyword:this.filter.keyword,status:0}
			this.getData()
		},
		async getData(reload = true) {
			if (reload) {
				this.pagination.page = 1
			}
			this.loading = true
			let data = await this.$api('GET','order',Object.assign(this.filter,{page:this.pagination.page,pageSize:this.pagination.size}))
			this.datas = data.data
			this.pagination.total = data.total
			this.loading = false
		},
		doEdit (id){
			this.id = id
			this.openEdit = true
		},
		doHandle(status){
			this.$Confirm('确定受理吗？').then(() => {
				this.handleApi(this.id,status)
			}).catch(() => {})
		},
		async handleApi(id,status){
			await this.$api('GET','order/'+id+'/edit',{status:status})
		},
		async doDelete (id,istrue=false){
			if(istrue){
				let res = 0
				res = await this.$api('DELETE','order/'+id)
				if(res){
					this.datas.forEach((item,index) => {
						if(item.id == id){
							this.datas.splice(index,1)
						}
					})
				}
			}else{
				this.$Confirm('确定删除？').then(() => {
					this.doDelete(id,true)
				}).catch(() => {})
			}
		}
	}
};
</script>

<style lang='less'>
	.h-dropdownmenu{
		margin-top: -5px;
	}
	.productTable{
		th {
			height: 25px;
		}
		.productPic {
			height: 50px;
			max-width: 120px;
			border-radius:5px;
		}
	}
</style>